<template>
	<view class="py-[20rpx]">

		<view class="typefaceList">
			<view class="bg-[#fff]  px-[20rpx]">
				<view class="  flex justify-between items-center h-[106rpx]  boderbotom">
					<view class="">
						头像
					</view>
					<view class="flex items-center">
						<view class="">
							<button class="avters" open-type="chooseAvatar" @longpress="previewImg(userInfo.image)" @chooseavatar='onChooseAvatar' boder="none">
								<up-avatar :src="userInfo.image?userInfo.image:avtorpath"></up-avatar>
							</button>
						</view>
						<view class="flex items-center relative left-[10rpx]">
							<image class="w-[36rpx] h-[36rpx]" src="@/static/order/rightarrow.svg"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="oneboder">

				</view>
				<view class="bg-[#fff]">
					<view @click="goeditName(userInfo.nickname)"
						class="boderbotom h-[106rpx] flex justify-between items-center">
						<view class="">
							用户名
						</view>
						<view class="flex items-center">
							<view class="">
								<up-input v-model="userInfo.nickname" disabled disabledColor="#fff" border="none"
									inputAlign="right" size="small" placeholder=""></up-input>
							</view>
							<view class="flex items-center relative left-[10rpx]">
								<image class="w-[36rpx] h-[36rpx]" src="@/static/order/rightarrow.svg"
									mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="oneboder">

					</view>
				</view>
				<view class="bg-[#fff]">
					<view @click="editphone(userInfo.phone)"
						class="  flex justify-between items-center  boderbotom h-[106rpx] ">
						<view class="">
							手机号
						</view>
						<view class="flex items-center">
							<view class="">
								<up-input v-model="userInfo.phone" disabled disabledColor="#fff" border="none"
									inputAlign="right" size="small" placeholder=""></up-input>
							</view>
							<view class="flex items-center relative left-[10rpx]">
								<image class="w-[36rpx] h-[36rpx]" src="@/static/order/rightarrow.svg"
									mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="oneboder">

					</view>
				</view>
				<view class="bg-[#fff]  ">
					<view @click="goeditPass()" class="  flex justify-between items-center   h-[106rpx] ">
						<view class="">
							支付密码
						</view>
						<view class="flex items-center">
							<view class="">
								<up-input disabled disabledColor="#fff" border="none" inputAlign="right" size="small"
									placeholder=""></up-input>
							</view>
							<view class="flex items-center relative left-[10rpx]">
								<image class="w-[36rpx] h-[36rpx]" src="@/static/order/rightarrow.svg"
									mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="oneboder" v-if="version">
					</view>
				</view>
				<view class="bg-[#fff]" v-if="version">
					<view  class="  flex justify-between items-center   h-[106rpx] ">
						<view class="">
							版本号
						</view>
						<view class="flex items-center">
							<view class="">
								{{version}}
							</view>
							<view class="flex items-center">
				
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>

		<view class="reason-button" @click="loginOut">
			<up-button :customStyle="{borderRadius:'20rpx',height:'98rpx',border:'none'}">
				退出账号
			</up-button>
			<view class="text-center pt-[37rpx] typefaceSeverice">
				<!-- 当前版本 v6.34.7 -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import avtorpath from "@/static/avator.jpg"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		info,
		image
	} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		useStore
	} from '@/stores/user.js'
	const store = useStore();
	const version=ref('')
	onShow(() => {
		version.value=wx.getAccountInfoSync().miniProgram.version
		myinfo()
	})
	//退出登录
	let loginOut = () => {

		uni.showModal({
			title: "退出账户",
			content: "您确定要退出账户吗？",
			success(res) {
				if (res.confirm) {
					uni.removeStorageSync('loginTokenKey')
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},

		})

	}
	const previewImg = (arr) => {
		let imgUrlList = [arr]
		uni.previewImage({
			urls: imgUrlList,
			longPressActions: {
				// itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}

	// 更换头像
	const onChooseAvatar = (e) => {
		uni.uploadFile({
			url: store.uploadurl,
			filePath: e.detail.avatarUrl,
			name: "file",
			header: {
				'Authorization': `${uni.getStorageSync('loginTokenKey')}`
			},

			success: (res) => {
				let dataee = JSON.parse(res.data);
				imagehead.value = dataee.result
				let data = {
					image: imagehead.value
				}
				image(data).then(res => {
					if (res.code == 200) {
						console.log(res, '222')
						myinfo()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						console.log(res, '222')
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err)
				})
				console.log("更换头像", imagehead.value);
			},
			fail: (err) => {
				console.log(err, "头像不用")
			}

		})
	}



	//更换头像
	let baseUrl = ref()
	// uni.setStorageSync('url', 'http://192.168.101.24:8088');
	// baseUrl.value = uni.getStorageSync('url'); loginTokenKey
	let imagehead = ref()
	let changeUserPhoto = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ["original", "compressed"],
			sourceType: ["album"],

			success: (ret) => {
				uni.uploadFile({
					url: store.uploadurl,
					filePath: ret.tempFilePaths[0],
					name: "file",

					header: {
						'Authorization': `${uni.getStorageSync('loginTokenKey')}`
					},

					success: (res) => {
						let dataee = JSON.parse(res.data);
						imagehead.value = dataee.result
						let data = {
							image: imagehead.value
						}
						console.log("data", data);
						image(data).then(res => {
							if (res.code == 200) {
								console.log('上传头像', res);
								// myinfo()
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
						console.log("更换头像", imagehead.value);
					}

				})
			}
		})
	}
	//获取个人信息
	let userInfo = ref({
		IsSetPassword: null,
		payPassword: "",
		createdAt: '',
		id: '',
		image: '',
		nickname: '',
		openid: '',
		phone: '',
		platform: '',
		unionid: '',
		updatedAt: '',
		userName: '',
	})
	let myinfo = () => {
		if (uni.getStorageSync('loginTokenKey')) {
			info().then(res => {
				if (res.code == 200) {
					userInfo.value = res.result
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		} else {
			console.log("111111,返回首页")
			uni.switchTab({
				url: "/pages/index/index"
			})
		}

	}
	//修改用户名
	let goeditName = (name) => {
		uni.navigateTo({
			url: '/page_my/myInfo/editName/editName?name=' + name
		})
	}
	//修改手机号
	let editphone = (e) => {
		uni.navigateTo({
			url: '/page_my/myInfo/editphone/editphone'
		})
	}

	// 修改支付、设置支付密码
	let goeditPass = () => {
		if (userInfo.value.payPassword == "" || userInfo.value.payPassword == null) {
			//设置
			uni.navigateTo({
				url: '/page_my/myInfo/addpassword/addpassword'
			})
		} else {
			//修改
			uni.navigateTo({
				url: '/page_my/myInfo/editpassword/editpassword?phone=' + userInfo.value.phone
			})
		}

	}
	let gozhifupass2 = () => {
		uni.navigateTo({
			url: '/page_my/userInfo/paymentpassword/editpayPassword/editpayPassword'
		})
	}

	let gologinpass = () => {
		uni.navigateTo({
			url: '/page_my/userInfo/loginPassword/loginPassword'
		})
	}
</script>

<style lang="scss">
	.reason-button {
		padding: 40rpx 40rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		// background-color: #fff;
	}

	.avters {
		border: 2px solid #fff !important;
		background-color: #fff;
		padding: 0;
		border-radius: 50%;
	}

	.typefaceList {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #050E2C;
	}

	.boderbotom {
		// border-bottom: 1px solid #efefef;
	}

	.oneboder {
		border-bottom: 1px solid #efefef;
		transform: scaleY(.5);
	}
</style>